<template>
  <div>
       <el-table
        :data="emps"
        border
        stripe>
        <el-table-column
            type="selection"
            align="left"
            width="50">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            align="left"
            fixed
            width="120">
        </el-table-column>
        <el-table-column
            prop="workId"
            label="工号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            align="left"
            width="200">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话号码"
            align="left"
            width="140">
        </el-table-column>
        <el-table-column
            prop="tdepartment.name"
            label="所属部门"
            align="center"
            width="200">
        </el-table-column>
        <el-table-column
            label="工资账套"
            align="center">
            <template slot-scope="scope">
                <el-tooltip placement="right" v-if="scope.row.tsalary">
                    <div slot="content">
                        <table>
                            <tr>
                                <td>基本工资</td>
                                <td>{{scope.row.tsalary.basicSalary}}</td>
                            </tr>
                            <tr>
                                <td>交通补助</td>
                                <td>{{scope.row.tsalary.trafficSalary}}</td>
                            </tr>
                            <tr>
                                <td>午餐补助</td>
                                <td>{{scope.row.tsalary.lunchSalary}}</td>
                            </tr>
                            <tr>
                                <td>奖金</td>
                                <td>{{scope.row.tsalary.bonus}}</td>
                            </tr>
                            <tr>
                                <td>养老金比率</td>
                                <td>{{scope.row.tsalary.pensionPer}}</td>
                            </tr>
                            <tr>
                                <td>养老金基数</td>
                                <td>{{scope.row.tsalary.pensionBase}}</td>
                            </tr>
                            <tr>
                                <td>医疗保险比率</td>
                                <td>{{scope.row.tsalary.medicalPer}}</td>
                            </tr>
                            <tr>
                                <td>医疗保险基数</td>
                                <td>{{scope.row.tsalary.medicalBase}}</td>
                            </tr>
                            <tr>
                                <td>公积金比率</td>
                                <td>{{scope.row.tsalary.accumulationFundPer}}</td>
                            </tr>
                            <tr>
                                <td>公积金基数</td>
                                <td>{{scope.row.tsalary.accumulationFundBase}}</td>
                            </tr>
                        </table>
                    </div>
                    <el-tag type="success">{{scope.row.tsalary.name}}</el-tag>
                </el-tooltip>
                <el-tag type="success" v-else >暂未设置</el-tag>
            </template>
        </el-table-column>
        <el-table-column 
            label="操作"
            align="center">
            <template slot-scope="scope">
                  <el-popover
                    placement="left"
                    title="修改工资账套"
                    width="200"
                    @show="showPopover(scope.row.tsalary)"
                    @hide="hidePopover(scope.row)"
                    trigger="click">
                    <el-button slot="reference" type="danger" >修改工资账套</el-button>
                    <el-select v-model="currentSalary" placeholder="请选择" size="mini">
                        <el-option   
                        v-for="item in salaries"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-popover>
            </template>
        </el-table-column>
       </el-table>
       <div class="salary-pagination">
           <el-pagination
                background
                @current-change="pageChange"
                @size-change="sizeChange"
                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                :total="total">
           </el-pagination>
       </div>
  </div>
</template>

<script>
export default {
    name: "salSobCfg",
    data(){
        return{
                emps: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                salaries:[],
                currentSalary: null,
        }
    },
    created(){
        this.initEmps();
        this.initSalaries();
    },
    methods: {
        hidePopover(data){
            if(this.currentSalary&&(data.tsalary == null || data.tsalary.id != this.currentSalary)){
                this.$put('/salary/sobcfg/?eid='+data.id+'&sid='+this.currentSalary).then(res =>{
                    if(res){
                        this.initEmps();
                    }
                })
            }
            
        },
        showPopover(data){
            if(data){
                this.currentSalary = data.id;
            }else{
                this.currentSalary = null;
            }
        },
        initSalaries(){
            this.$get('/salary/sobcfg/salaries').then( res=> {
                this.salaries = res;
            });
        },
        pageChange(page){
            this.currentPage = page;
            this.initEmps();
        },
        sizeChange(size){
            this.pageSize = size;
            this.initEmps();
        },
        initEmps(){
            this.$get('/salary/sobcfg/?currentPage='+this.currentPage+ '&pageSize='+this.pageSize).then(res=>{
                this.emps = res.data.list;
                this.total = res.data.total;
            })
        }
    }
}
</script>

<style>
.salary-pagination{
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}
</style>